<template>
  <a-card>
    <a-cascader :options="options" placeholder="请选择设备" change-on-select @change="onChange" style="margin-right:20px;" />
    <a-range-picker  
        :show-time="{
          hideDisabledOptions: true,
          defaultValue: [
            moment('00:00:00', 'HH:mm:ss'),
            moment('11:59:59', 'HH:mm:ss'),
          ],
        }"

        @change="gettime"
    />
    <a-select style="margin-left:20px;width: 200px" v-model="form.id">
      <a-select-option v-for="(item,index) in listType" :key="index" :value="item.standardCode">
         {{ item.standardName }}
      </a-select-option>
    </a-select>
   <a-button type="primary" @click="search" v-if="form.deviceCode" style="margin-left:20px;">查询</a-button>
   <a-radio-group v-model="distype" @change="getVal" v-if="form.deviceCode" style="margin-left:20px;">
      <a-radio-button value="0">
        列表
      </a-radio-button>
      <a-radio-button value="1">
        曲线
      </a-radio-button>
    </a-radio-group>
   <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
      style="margin-top:20px;"
      v-show="distype=='0'"
    >
      <span slot="xuhao" slot-scope="row">{{ row.xuhao }}</span>
      <span slot="equipmentName" slot-scope="row">{{ row.equipmentName }}</span>
      <span slot="classifyName" slot-scope="row">{{ row.classifyName }}</span>
      <span slot="harvesteValue" slot-scope="row">{{ row.harvesteValue }}</span>
      <span slot="harvesteDate" slot-scope="row">{{ row.harvesteDate }}</span>
    </a-table>
    <div class="echart" id="echart-line" v-bind:class="{ active: distype=='0' }"></div>
    <div>
        <span style="margin-left:120px;">最大值：{{ maxnum }}</span>
        <span style="margin-left:30px;">最小值：{{ minnum }}</span>
        <span style="margin-left:30px;">平均值：{{ averagenum }}</span>
    </div>  
  </a-card>
</template>

<script>
import * as echarts from 'echarts';
import moment from 'moment';
import { mainMixin } from "@/mixins/main";
const columns = [
  {
    title: '序号',
    key: "xuhao",
    ellipsis: true,
    scopedSlots: { customRender: "xuhao" },
  },
  {
    title: "设备名称",
    key: "equipmentName",
    ellipsis: true,
    scopedSlots: { customRender: "equipmentName" },
  },
  {
    title: "类型",
    key: "classifyName",
    ellipsis: true,
    scopedSlots: { customRender: "classifyName" },
  },
  {
    title: "监测值",
    key: "harvesteValue",
    ellipsis: true,
    scopedSlots: { customRender: "harvesteValue" },
  },
  {
    title: "监测时间",
    key: "harvesteDate",
    ellipsis: true,
    scopedSlots: { customRender: "harvesteDate" },
  },
];
export default {
  mixins: [mainMixin],
  data() {
    return {
      options: [],
      pages: {
        pageVo: {
          pageNumber: 1,
          pageSize: 100,
        },
      },
      listType:[],
      form:{
        id:'',
        deviceCode:'',
        beginTime:'',
        endTime:'',
        pageVo: {
          pageNumber: 1,
          pageSize: 10,
        },
      },
      dataList: [],
      loading: false,
      columns: columns,
      url: "/rapid/dataRecord/getDataRecordList",
      distype:'0',
      maxnum:0,
      minnum:0,
      averagenum:0,
    };
  },
  created() {
    this.getAllequipment();
    this.getStatus();
  },
  methods: {
    search(){
       this.ipagination.current = 1;
       this.form.pageVo.pageNumber = 1;
       this.form.pageVo.pageSize = 10;
       this.getList();
    },
    gettime(val){
       console.log(val)
       this.form.beginTime = val[0];
       this.form.endTime = val[1];
    },
    getVal(e){
      this.distype = e.target.value;
      if(this.distype=='1' && this.dataList.length>0){
        console.log(this.dataList)
         this.drawEcharts(this.dataList)
      }
    },
    getAllequipment() {
      this.$http("/rapid/equipmentInfo/getList", {}).then((res) => {
        if (res.code == "200") {
          res.result.forEach((item) => {
            let obj = {};
            obj.value = item.classifyCode;
            obj.label = item.classifyName;
            obj.children = [];
            if(!item.equipmentInfoList){item.equipmentInfoList = [];}
            if (item.equipmentInfoList.length > 0) {
              item.equipmentInfoList.forEach((ele) => {
                let myobj = {};
                myobj.value = ele.deviceCode;
                myobj.label = ele.equipmentName;
                obj.children.push(myobj);
              });
            }
            this.options.push(obj);
          });
          console.log(this.options);
        }
      });
    },
    getStatus() {
      this.$http("/rapid/standardInfo/getPage", this.pages).then((res) => {
         if(res.code == '200'){
           this.listType = res.result.records;
           this.form.id = res.result.records[0].standardCode;
         }else{
           this.$message.error(res.message);
         }
      });
    },
    drawEcharts(data){
          console.log(data);
          let xData = [];
          let yData = [];
              data.forEach(item=>{
                 xData.push(item.harvesteDate);
                 yData.push(Number(item.harvesteValue))
              })
          this.minnum =  Math.min.apply(null,yData);//获取数组中最小值
          this.maxnum =  Math.max.apply(null,yData);//获取数组中的最大值
          let n = 0;
          yData.forEach(ele=>{
             n+=ele;
          })
          this.averagenum = n/yData.length;
          let getchart = echarts.init(document.getElementById('echart-line'));
          let option = {
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: yData,
                    type: 'line',
                    smooth: true
                }]
          };
          getchart.setOption(option);
    },
    onChange(value) {
      if(value.length == 2){
        this.form.deviceCode = value[1];
      }else{
        this.form.deviceCode = '';
      }
    },
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
  },
};
</script>

<style>
#echart-line{
  width: 100%;
  height: 400px;
}
.active{
   opacity: 0;
   position: absolute;
   top:0;
   z-index: -100;
}
</style>